<template>
	<view class="setaddress-rich">
		<form report-submit="true" @submit="formSubmit">
			<view class="realName-page-rich">
				<view class="contents-rich">
					<view class="contents-item-view">
						<view class="name">收货人</view>
						<input type="text" class="contents-item-input" placeholder="填写收货人姓名"
							placeholder-class="contents-item-view-city" name="realname" :value="data.realname" />
					</view>
					<view class="contents-item-view">
						<view class="name">收货人电话</view>
						<input class="contents-item-input" type="number" placeholder="填写收货人电话" name="telephone"
							placeholder-class="contents-item-view-city" :value="data.telephone" />
					</view>

					<view class="contents-item-view">
						<view class="name" :style="{
              display: 'flex',
              alignItems: 'center',
            }">
							收货地址
						</view>
						<view class="contents-item-view-city" @click="$refs.cityPicker.show()" v-if="!cityText.length">
							选择收货区域
							<image mode="scaleToFill" class="iocn" src="../../static/my/jiantou.png"></image>
						</view>
						<view class="contents-item-view-city" @click="$refs.cityPicker.show()" v-if="cityText.length">
							{{ cityText }}
							<image mode="scaleToFill" class="iocn" src="../../static/my/jiantou.png"></image>
						</view>
					</view>

					<view class="contents-item-view">
						<view class="name">详细地址</view>
						<input class="contents-item-input" placeholder="详细地址" name="street"
							placeholder-class="contents-item-view-city" :value="data.street" />
					</view>
					<view class="contents-item-view">
						<view class="name">设置默认地址</view>
						<view v-if="!isFromOrder" class="min-switch">
							<view class="my-switch" :class="{ 'my-switch-on': isChecked }" :value="isChecked"
								@click="getSwitch"></view>
						</view>
					</view>
				</view>
			</view>
			<view style="display: flex; justify-content: center;">
				<button form-type="submit" class="footer-rich">保存</button>
			</view>
		</form>

		<!-- 选择省市区弹框 -->
		<gk-city ref="cityPicker" :pickerSize="3" headtitle="请选择所在区域" :provincedata="provincedata"
			@funcvalue="getpickerParentValue"></gk-city>
	</view>
</template>
<script>
	import gkCity from "@/components/gk-city-rich/gk-city-rich.vue"
	import {
		notifyTopPageRefresh
	} from "../../components/orderItem/orderActionBtns/utils/checkShowBtn"
	export default {
		data() {
			return {
				provincedata: [{
					text: "请选择",
					value: ""
				}], //选择省市区默认值
				cityText: '', //省市区信息
				cityText1: [],
				cityValue: [],
				isChecked: false, //控制默认地址开关
				isTips: true, //控制头部提示开关
				id: "", //地址id
				data: {}, //修改地址数据
				isEdit: false, //是否编辑
				isFromOrder: false, // 是否是从订单页面跳转过来的修改地址
				orderId: "",


				//下面是没用的垃圾混淆代码
				renzhengTimeSta1111111: true, //初次请求认证时间默认是带有的，
				zhuceTimeSta11111: false, //初次请求注册时间默认是没有的
				renzhengTimeList11111: [],
				zhuceTimeStaList1111: null,
				detailOrderIdStr11111: '',
				threeTabCurrent1111: 0,
				applyGOodsList11111: [], //供货商列表
				allCardEnterSta1111: false, //默认是false，点击批量卡券入库的时候变为true
				codeAddNumsList11111: [],
				numsList11111: [],
				dataSourceBqcp1111: [],
				selectedRowKeys1111: [],
				selectedRowKeysB11111: [],
				rkVisible11111: false,
				rkjlVisible1111: false,
				lhjlVisible1111: false,
				currentStyleData22222: {},
				dataSourceStyle2222: [],
				showStyleData2222: false,
				indexTemplate2222: [],
				SVGCircleElement3ee: '',
				vshoweqwsc1111: false,
				showStyleDataInfo2222: false,
				opeCategoryList2222: [],
				leimuVisible2222: false,
				selectedRowKeys02222: [],
				selectionRows02222: [],
				selectedRowKeys133333: [],
				selectionRows13333: [],
				selectedRowKeys2333: [],
				selectionRows23333: [],
				selectedRowKeys33333: [],
				selectionRows33333: [],
				selectedRowKeys4333: [],
				selectionRows43333: [],
				curwfqwrentStyleDaterwaInfo444: {},
				currwerentStywerleDatweraInfo1444: {},
				currewerntStyleDataInfo24444: {},
				currentweStyleDytuataIwenfo34444: {},
				currenwetStdfgyleDataInfo44444: {},
				checkZfbPhone_h5444: '',
				plNafgdvfdtjyme4444: '', //四大品类的名字
				uniPdfgrtylatform444: '', //运行环境mp-alipay mp-weixin
				refgjtytrsemark555: '', //备注
				timefgjSelStr5555: '', //选择的上门时间（2023-08-31 00:00:00）
				amOdcuiofasrpm5555: '', //选择的上门时间是上午还是下午
				pageShnjlkgohowTime5555: '', //页面上用户看到的显示的时间
				paraghsdfmsw454: {},
				valhgujtueNum56756: 0,
				addrdraess56756: {}, //上门收货地址
				adawerterydressId575: 0,
				sceoyuitne57567: '',
				tntuiopId56757: '',
				weictyuratCustomer5756: '',
				yuidurtyuoy567567: false,


				//下面是没用的垃圾混淆代码
				renzhengTimeSta1111111: true, //初次请求认证时间默认是带有的，
				zhuceTimeSta11111: false, //初次请求注册时间默认是没有的
				renzhengTimeList11111: [],
				zhuceTimeStaList1111: null,
				detailOrderIdStr11111: '',
				threeTabCurrent1111: 0,
				applyGOodsList11111: [], //供货商列表
				allCardEnterSta1111: false, //默认是false，点击批量卡券入库的时候变为true
				codeAddNumsList11111: [],
				numsList11111: [],
				dataSourceBqcp1111: [],
				selectedRowKeys1111: [],
				selectedRowKeysB11111: [],
				rkVisible11111: false,
				rkjlVisible1111: false,
				lhjlVisible1111: false,
				currentStyleData22222: {},
				dataSourceStyle2222: [],
				showStyleData2222: false,
				indexTemplate2222: [],
				SVGCircleElement3ee: '',
				vshoweqwsc1111: false,
				showStyleDataInfo2222: false,
				opeCategoryList2222: [],
				leimuVisible2222: false,
				selectedRowKeys02222: [],
				selectionRows02222: [],
				selectedRowKeys133333: [],
				selectionRows13333: [],
				selectedRowKeys2333: [],
				selectionRows23333: [],
				selectedRowKeys33333: [],
				selectionRows33333: [],
				selectedRowKeys4333: [],
				selectionRows43333: [],
				curwfqwrentStyleDaterwaInfo444: {},
				currwerentStywerleDatweraInfo1444: {},
				currewerntStyleDataInfo24444: {},
				currentweStyleDytuataIwenfo34444: {},
				currenwetStdfgyleDataInfo44444: {},
				checkZfbPhone_h5444: '',
				plNafgdvfdtjyme4444: '', //四大品类的名字
				uniPdfgrtylatform444: '', //运行环境mp-alipay mp-weixin
				refgjtytrsemark555: '', //备注
				timefgjSelStr5555: '', //选择的上门时间（2023-08-31 00:00:00）
				amOdcuiofasrpm5555: '', //选择的上门时间是上午还是下午
				pageShnjlkgohowTime5555: '', //页面上用户看到的显示的时间
				paraghsdfmsw454: {},
				valhgujtueNum56756: 0,
				addrdraess56756: {}, //上门收货地址
				adawerterydressId575: 0,
				sceoyuitne57567: '',
				tntuiopId56757: '',
				weictyuratCustomer5756: '',
				yuidurtyuoy567567: false,
			}
		},
		onLoad(e) {
			this.isFromOrder = e?.orderId != undefined // 判断是否来自订单模块中的修改地址
			this.orderId = e?.orderId
			const that = this
			if (e && e.id) {
				this.$request(
					"member/mall/userAddress/getUserAddressById", {
						id: e.id,
						uid: this.$getUid()
					},
					"post", false
				).then((res) => {
					if (res.success) {
						this.data = res.data
						this.cityText = res.data.provinceStr +
							',' +
							res.data.cityStr + ',' +
							res.data.areaStr
						this.cityValue = [res.data.province, res.data.city, res.data.area]
						that.provincedata = [{
								text: res.data.provinceStr,
								value: res.data.province
							},
							{
								text: res.data.cityStr,
								value: res.data.city
							},
							{
								text: res.data.areaStr,
								value: res.data.area
							},
						]
						this.isChecked = res.data.isDefault
						this.isEdit = true
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}

				})
			} else {}
		},
		components: {
			gkCity
		},
		methods: {
			//获取省市区信息
			getpickerParentValue(val) {
				let _city = val
				this.cityText = _city.map((item) => item.text)
				this.cityText1 = _city.map((item) => item.name)
				this.cityValue = _city.map((item) => item.value)
				this.provincedata = val
				this.cityText = this.cityText.join(",")
			},
			//新增
			add(street, telephone, realname) {
				const url = this.isFromOrder ? "order/mall/api/order/userOrderAddressModify" :
					"member/mall/userAddress/addUserAddress"
				const postData = {
					province: this.cityValue[0],
					provinceStr: this.cityText.split(",")[0],
					city: this.cityValue[1],
					cityStr: this.cityText.split(",")[1],
					area: this.cityValue[2],
					areaStr: this.cityText.split(",")[2],
					block: this.cityValue[3],
					blockStr: this.cityText1[3],
					street,
					telephone,
				}

				if (this.isFromOrder) { // 来自订单模块修改地址时
					postData.orderId = this.orderId
					postData.realName = realname
				} else {
					postData.isDefault = this.isChecked
					postData.realname = realname
					postData.uid = this.$getUid()
				}
				console.log("提交信息地址：", postData);
				console.log("提交信息地址：", this.cityText);
				this.$request(
					url,
					postData,
					"post"
				).then(() => {
					if (this.isFromOrder) { // 来自订单模块时，修改完地址时通知组件更新
						notifyTopPageRefresh.apply(this) // 通知订单页面、订单详情页面进行刷新操作
					}
					uni.navigateBack({
						delta: 1,
					})
				})
			},
			//修改
			modify(street, telephone, realname) {
				this.$request(
					"member/mall/userAddress/modifyUserAddress", {
						province: this.cityValue[0],
						provinceStr: this.cityText.split(",")[0],
						city: this.cityValue[1],
						cityStr: this.cityText.split(",")[1],
						area: this.cityValue[2],
						areaStr: this.cityText.split(",")[2],
						isDefault: this.isChecked,
						realname,
						street,
						telephone,
						uid: this.$getUid(),
						id: this.data.id,
					},
					"post"
				).then((res) => {
					uni.navigateBack({
						delta: 1,
					})
				})
			},

			//提交按钮
			formSubmit(e) {
				const {
					street,
					telephone,
					realname
				} = e.detail.value
				var reg_user = /^[\u4e00-\u9fa5]{2,8}$/; //2-8个中文字符正则
				var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (!realname || realname == '' || !reg_user.test(realname)) {
					uni.showToast({
						title: "请输入正确的收货人姓名",
						icon: 'none'
					})
					return
				}
				if (!telephone || telephone.length !== 11 || telephone == '' || !reg_tel.test(telephone)) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: 'none'
					})
					return
				}
				if (!this.cityText.length) {
					uni.showToast({
						title: "请选择省市区",
						icon: 'none'
					})
					return
				}
				if (!street) {
					uni.showToast({
						title: "请输入详细地址",
						icon: 'none'
					})
					return
				}
				if (this.isEdit) {
					this.modify(street, telephone, realname)
				} else {
					this.add(street, telephone, realname)
				}
			},
			//默认地址开关
			getSwitch(e) {
				this.isChecked = !this.isChecked
			},
			//删除头部提示
			deleteTips() {
				this.isTips = false
			},

		},
	}
</script>

<style lang="scss" scoped>
	.setaddress-rich {

		.realName-page-rich {
			@include wh(100%, 100%);
			margin-top: 20rpx;

			.contents-rich {
				background-color: #ffffff;
				padding: 0 20rpx 0 30rpx;
				border-radius: 20rpx;

				.contents-item-view {
					color: #333333;
					font-size: 28rpx;
					padding: 20rpx 0;
					box-sizing: border-box;
					background-color: #fff;
					font-family: PingFangSC-Regular;
					border-bottom: 1px solid #efefef;
					height: 100rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					width: 100%;

					.name {
						font-size: 30rpx;
						width: 30%;
						font-weight: 500;
					}

					.contents-item-input {
						padding-right: 20rpx;
						width: 70%;
						text-align: right;
						color: #999999;

					}

					/deep/ .contents-item-view-city {
						color: #999999;
						padding-right: 20rpx;
						font-size: 28rpx;
						font-weight: normal;
					}
				}
			}

			.iocn {
				margin-left: 10rpx;
				width: 10rpx;
				height: 16rpx;
			}
		}

		.street {
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			background: #fff;
			margin-top: 20rpx;
		}

		.footer-rich {
			@include global-background-color-red();
			width: 690rpx;
			height: 80rpx;
			border-radius: 40rpx;
			line-height: 80rpx;
			position: fixed;
			bottom: 30rpx;
			border: beige;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #fff;
		}

		.min-switch {
			font-weight: 400;
			color: #333333;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			border-radius: 20rpx;
			font-size: 28rpx;
			padding: 24rpx 30rpx;


			.my-switch {
				box-sizing: border-box;
				background-color: #dfdfdf;
				transition: background-color 0.1s, border 0.1s;
				width: 80rpx;
				height: 32rpx;
				outline: 0;
				display: block;
				position: relative;
				border-radius: 16rpx;

				&:after {
					content: " ";
					box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
					transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
					border-radius: 20rpx;
					background: #ffffff;
					position: absolute;
					top: -5rpx;
					left: -15rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.my-switch-on {
				@include global-background-color-red();

				&:after {
					transform: translateX(61rpx);
				}
			}
		}

	}
</style>